<template>
  <div class="main-main readonly" v-loading="loading">
    <el-form :model="form" :rules="rules" ref="form">
      <el-row style="background: #f8fbff; margin: 10px 0">
        <el-col :span="24" class="d-between">
          <span class="d-start title">单位信息</span>
          <el-button
            size="medium"
            type="primary"
            @click="save"
            v-if="is_sealed == 1"
            >保存</el-button
          >
          <!-- <el-button size="medium" type="info" v-if="is_sealed == 2">已封存</el-button> -->
        </el-col>
      </el-row>
      <el-row :gutter="10" type="flex" justify="start">
        <el-col :span="16">
          <el-form-item
            prop="jsfwdwmc"
            label="技术服务单位名称"
            :label-width="formLabelWidth"
          >
            <!-- <el-select
              size="medium"
              v-model="form.jsfwdw_id"
              placeholder="请选择活动区域"
              @change="Enter($event)"
            >
              <el-option
                :label="item.dwmc"
                :value="item.id"
                v-for="item in EnterpriseList"
                :key="item.id"
              ></el-option>
            </el-select>-->
            <el-input
              size="medium"
              v-model="form.jsfwdwmc"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8" class="d-end">
          <el-button
            size="medium"
            type="success"
            plain
            @click="dialogFormVisible2 = !dialogFormVisible2"
          >添加企业信息</el-button>
        </el-col>-->
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item
            prop="clrq"
            label="成立日期"
            :label-width="formLabelWidth"
          >
            <!-- <el-input size="medium" v-model="form.clrq"></el-input> -->
            <el-date-picker
              value-format="yyyy-MM-dd"
              size="medium"
              v-model="form.clrq"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              :disabled="is_sealed == 2"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            prop="ygrs"
            label="员工人数"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.ygrs"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item
            prop="frxm"
            label="法人姓名"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.frxm"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            prop="zzjgdm"
            label="组织机构代码"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.zzjgdm"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item prop="zjl" label="总经理" :label-width="formLabelWidth">
            <el-input
              size="medium"
              v-model="form.zjl"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            prop="zjl_lxdh"
            label="联系电话"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.zjl_lxdh"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            prop="zjl_zc"
            label="职称"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.zjl_zc"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item
            prop="jsfzr"
            label="技术负责人"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.jsfzr"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            prop="jsfzr_lxdh"
            label="联系电话"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.jsfzr_lxdh"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            prop="jsfzr_zc"
            label="职称"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.jsfzr_zc"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item
            prop="qyzz"
            label="企业资质"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.qyzz"
              type="textarea"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="background: #f8fbff; margin: 10px 0">
        <el-col :span="24">
          <span class="d-start title">项目主要人员信息</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item
            prop="xmjlxm"
            label="项目经理姓名"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.xmjlxm"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            prop="xmjl_lxdh"
            label="联系电话"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.xmjl_lxdh"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8" class="d-end">
          <el-button
            size="medium"
            type="success"
            plain
            @click="dialogFormVisible3 = !dialogFormVisible3"
          >添加人员信息</el-button>
        </el-col>-->
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item
            prop="xmjl_dwrz"
            label="单位任职"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.xmjl_dwrz"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            prop="xmjl_zc"
            label="职称"
            :label-width="formLabelWidth"
          >
            <el-input
              size="medium"
              v-model="form.xmjl_zc"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="background: #f8fbff; margin: 10px 0">
      <el-col :span="24">
        <span class="d-start title">项目其他人员信息</span>
      </el-col>
    </el-row>
    <el-form
      :model="formNull"
      :rules="ruless"
      ref="formNull"
      v-if="is_sealed == 1"
    >
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item prop="xm" label="姓名" :label-width="formLabelWidth">
            <el-input
              size="medium"
              v-model="formNull.xm"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="lxdh" label="联系电话" :label-width="'100px'">
            <el-input
              size="medium"
              v-model="formNull.lxdh"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="dwrz" label="单位任职" :label-width="'100px'">
            <el-input
              size="medium"
              v-model="formNull.dwrz"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="zc" label="职称" :label-width="'70px'">
            <el-input
              size="medium"
              v-model="formNull.zc"
              :disabled="is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3" class="d-end">
          <el-form-item>
            <el-button
              size="medium"
              icon="el-icon-plus"
              type="success"
              @click="addOther('formNull')"
            ></el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </el-form>
    <el-form
      :model="item"
      v-for="(item, index) in formOtherPerson"
      :key="index"
      style="margin: 10px 0"
    >
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item
            prop="xm"
            label="姓名"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, trigger: 'blur', message: '该值不能为空' },
            ]"
          >
            <el-input size="medium" v-model="item.xm" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="lxdh" label="联系电话" :label-width="'100px'">
            <el-input size="medium" v-model="item.lxdh" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="name" label="单位任职" :label-width="'100px'">
            <el-input size="medium" v-model="item.dwrz" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="name" label="职称" :label-width="'70px'">
            <el-input size="medium" v-model="item.zc" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3" class="d-end">
          <el-form-item>
            <el-button
              size="medium"
              icon="el-icon-minus"
              type="success"
              @click="del(index)"
              v-if="is_sealed == 1"
            ></el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="background: #f8fbff; margin: 10px 0">
      <el-col :span="24">
        <span class="d-start title">备注</span>
      </el-col>
    </el-row>
    <el-form>
      <el-row :gutter="10" type="flex" justify="start">
        <el-col :span="16">
          <el-form-item prop="bz" label="备注" :label-width="formLabelWidth">
            <el-input
              size="medium"
              v-model.trim="form.bz"
              :disabled="is_sealed == 2"
              placeholder="未完成原因/特殊情况说明"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["xm_id", "xmmc"],

  data() {
    return {
      form: {},
      formOtherPerson: [],
      formNull: {},
      rules: {
        // xmjlxm: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // jsfwdwmc: [
        //   { required: true, message: "该值不能为空", trigger: "blur" },
        // ],
      },
      ruless: {
        // xm: [{ required: true, message: "该值不能为空", trigger: "blur" }],
      },
      formLabelWidth: "140px",
      loading: false,
      is_sealed: 2,
    };
  },
  methods: {
    addOther() {
      this.$refs.formNull.validate((valid) => {
        if (valid) {
          this.formOtherPerson.push(this.formNull);
          this.formNull = {};
        } else {
          return false;
        }
      });
    },
    del(index) {
      this.formOtherPerson.splice(index, 1);
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.formNull.xm) {
            //姓名存在判断 存在进行表单验证
            this.$refs.formNull.validate((app) => {
              if (app) {
                // this.loading = true;
                this.form.xm_id = this.xm_id;
                let formOtherPerson = [...this.formOtherPerson];
                if (this.formNull.xm) {
                  formOtherPerson.push(this.formNull);
                }
                this.form.unitinfo = JSON.stringify(formOtherPerson);
                this.$post("/api/QqJsfwdw/actions", this.form).then((res) => {
                  if (res.code == 200) {
                    this.$message({
                      message: res.msg,
                      type: "success",
                    });
                    this.search();
                    this.formNull = {};
                  } else {
                    this.$message({
                      message: res.msg,
                      type: "error",
                    });
                  }

                  // this.loading = false;
                });
              } else {
                return false;
              }
            });
          } else {
            // this.loading = true;
            this.form.xm_id = this.xm_id;
            let formOtherPerson = [...this.formOtherPerson];
            if (this.formNull.xm) {
              formOtherPerson.push(this.formNull);
            }
            this.form.unitinfo = JSON.stringify(formOtherPerson);
            this.$post("/api/QqJsfwdw/actions", this.form).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.search();
                this.formNull = {};
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }

              // this.loading = false;
            });
          }
        } else {
          return false;
        }
      });
    },
    search() {
      this.loading = true;
      this.form = {};
      this.$get("/api/QqJsfwdw/index", { xm_id: this.xm_id }).then((res) => {
        if (res.code == 200) {
          if (res.data) {
            this.form = { ...res.data };
          } else {
            this.form = {};
          }
          if (this.form.unitinfo) {
            this.formOtherPerson = JSON.parse(this.form.unitinfo);
          } else {
            this.formOtherPerson = [];
          }
        }
        this.loading = false;
      });
    },
  },
  computed: {
    // xm_id() {
    //   return this.xm_id;
    // },
    // xmmc() {
    //   return this.xmmc;
    // }
  },
  watch: {
    xm_id() {
      this.search();
    },
  },
  mounted() {
    this.search();
  },
};
</script>

<style scoped lang="less">
.main-main {
  width: 100%;
  height: 500px;
  padding: 0 20px;
  overflow-y: scroll;
  .click {
    width: 100px;
    height: 100px;
    background: #ccc;
    cursor: pointer;
    position: absolute;
    right: 0;
    &:hover {
      border: 1px dashed #4098ff;
    }
  }
  .line {
    width: 2px;
    height: calc(100% - 40px);
    position: absolute;
    background: #ccc;
    bottom: 0;
    left: 20px;
  }
  .title {
    //   width: 120px;
    padding: 10px 20px;
    font-size: 18px;
    font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
    font-weight: 700;
    text-align: left;
    color: #409eff;
  }
}
</style>